{% load static %}

<!-- 导入css样式 -->
<link rel="stylesheet" href="{% static 'layui/css/layui.css' %}">

{% csrf_token %}
<!-- 设置ace编辑器的容器，给定高度，必须设置高度，否则无法显示-->
<div id="code-editor" style="height: 91%;width:98%;"></div>
<button class="layui-btn" style="margin-left: 90%" id="editBtn">应用</button>

<script src="{% static 'ace/ace.js' %}" type="text/javascript" charset="utf-8"></script>
<script src="{% static 'ace/theme/theme-chrome.js' %}" type="text/javascript" charset="utf-8"></script>
<script src="{% static 'ace/mode/mode-yaml.js' %}" type="text/javascript" charset="utf-8"></script>
<script src="{% static 'layui/layui.js' %}"></script>


<!-- 编写编辑器的内容 -->
<script>
    // 初始化一个编辑器对象
    var editor = ace.edit("code-editor");

    // 设置编辑器的样式(主题)，对应theme-*.js文件
    editor.setTheme("ace/theme/chrome");

    // 设置代码的语言(要展示的类型), 对应mode-*.js文件
    editor.session.setMode("ace/mode/yaml");

    // 设置打印线
    editor.setShowPrintMargin(false); // 不显示打印线
    // 设置字体大小
    editor.setFontSize(15);
    // 设置是否为只读(true时，用于展示代码)
    editor.setReadOnly(false);

    layui.use(['layer'], function () {
        var layer = layui.layer;
        var $ = layui.jquery;

        // 后端传了一个data：name, namespace, ，传过来的时候不是json对象，所以我们需要先对传过来的数据进行转换
        var name = "{{ data.name }}";
        var namespace = "{{ data.namespace }}";
        var res_type = "{{ data.res_type }}";

        $.ajax({
            type: "GET",
            {#url: "{% url 'export_res_yaml' %}?name=" + name + "&namespace=" + namespace + "&resource=" + resource, // ?name=name&namespace=namespace&resource=resource#}
            url: "{% url 'export_res_yaml' %}?name=" + name + "&res_type=" + res_type + "&namespace=" + namespace,
            // params: {},
            success: function (res) {
                if (res.code === 0) {
                    editor.setValue(res.data);
                    editor.gotoLine(1)
                } else {
                    layer.msg(res.msg, {icon: 5})
                }
            },
            error: function () {
                // 数据接口访问失败
                layer.msg("访问接口失败")
            }
        });


        $("#editBtn").on('click', function () {
            var content = editor.getValue();
            var csrf_token = $('[name="csrfmiddlewaretoken"]').val();
            data = {'yaml_content': content, 'csrfmiddlewaretoken': csrf_token};

            //console.log(data);

            $.ajax({
                type: "POST",  // 创建和更新都可以使用POST请求，但是一般建议如果是更新，则使用PUT协议，创建用POST
                url: "{% url 'apply_yaml' %}",  // 也要写一个通用的创建或者更新
                data: data,
                success: function (res) {
                    if (res.code === 0) {
                        layer.msg(res.msg, {icon: 6});
                        setTimeout(function () {
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                        },2000)
                    } else {
                        layer.msg(res.msg, {icon: 5})
                    }
                },
                error: function () {
                    layer.msg("服务端接口异常！")
                }
            });
        })
    })
</script>
